<%@ page import="java.util.Objects" %>
<%@ page import="static com.oracle.wls.shaded.org.apache.xalan.xsltc.compiler.sym.error" %>
<%@ page import="java.util.List" %><%--
  Created by IntelliJ IDEA.
  User: 20386
  Date: 2023/12/8
  Time: 12:46
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<c:set var="ctx" value="${pageContext.request.contextPath}"/>
<%
    List<String> errors = (List<String>) request.getAttribute("errors");
%>
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>添加用户表单</title>
    <script type="text/javascript" src="${ctx}/js/jquery-3.6.1.js"></script>
    <link rel="stylesheet" href="${ctx}/css/addUsers.css">
</head>
<style>
    li {
        list-style: none;
    }

    body {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
        margin: 0;
    }

    form {
        display: flex;
        width: 450px;
        flex-direction: column;
        border: 1px solid #ccc;
        border-radius: 5px 5px;
    }

    .box > li {
        margin-bottom: 50px;
    }

    .box > li > label {
        font-size: 20px;
    }

    .box > li > input[type='text'],
    input[type='password'],
    input[type='birthday'],
    input[type=date],
    select[name='userType'] {
        height: 25px;
        width: 200px;
        border-radius: 5px 5px;
    }


    .box > li > button[type='submit'] {
        width: 100px;
        margin-left: 10px;
    }

    .box > li > button[type='reset'] {
        width: 100px;
        margin-left: 100px;

    }
    .box>li>#errorTip
    {
        float: left;
        height: 30px;
        line-height: 30px;
        margin-left: 70px;
        color: #e62e2e;
        display: none;
    }

</style>
<body>
<div class="errors">
    <%
        if (Objects.nonNull(errors)) {
            for (String error : errors) {
    %>
    <div><%=error%>
    </div>
    <%
            }
        }
    %>
</div>

<form action="${ctx}/addUser" method="post" id="add_user">
    <ul class="box">
        <li>
            <label for="username">用户名:</label>
            <input type="text" id="username" name="username" value="${userUpdate.username}">
            <span class="error_tip1" id="errorTip">提示信息</span>
        </li>
        <li>
            <%--@declare id="gender"--%><label for="gender">性别：</label>
                <input <c:if test="${userUpdate.sex=='男'}">checked="checked"</c:if> name="gender" type="radio" value="男" />男&nbsp;&nbsp;&nbsp;&nbsp;
<%--            <input name="gender" type="radio" value="男" checked="checked"/>男&nbsp;&nbsp;&nbsp;&nbsp;--%>
            <input <c:if test="${userUpdate.sex=='女'}">checked="checked"</c:if> name="gender" type="radio" value="女"/>女

        </li>

        <li>
            <label for="password">密码：</label>
            <input value="${userUpdate.pwdHash}" type="password" id="password" name="password" required>
            <span class="error_tip2" id="errorTip">提示信息</span>
        </li>
        <li>
            <label for="birthday">生日：</label>
            <input value="${userUpdate.birthday}" type="date" id="birthday" name="birthday">
        </li>
        <li>
            <label for="userType">用户类型：</label>
            <select id="userType" name="userType">
                <option <c:if test="${userUpdate.usertype==1}">selected</c:if> value="读者">读者</option>
                <option <c:if test="${userUpdate.usertype==2}">selected</c:if> value="图书管理员">图书管理员</option>
                <option <c:if test="${userUpdate.usertype==3}">selected</c:if> value="系统管理员">系统管理员</option>
            </select>
        </li>
        <li name="button">
            <button type="submit" checked="checked" id="allow">确认信息</button>
            <button type="reset" id="clear">清空</button>
        </li>
    </ul>
</form>
<script>

    $(function () {

        var error_name = false;
        var error_password = false;
        var error_check = false;


        $('#username').blur(function () {
            check_user_name();
        });

        $('#password').blur(function () {
            check_pwd();
        });



        function check_user_name() {
            var len = $('#username').val().length;
            if (len < 2 || len > 20) {
                $('#username').next().html('请输入2-20个字符的用户名')
                $('#username').next().show();
                error_name = true;
            } else {
                $('#username').next().hide();
                error_name = false;
            }
        }

        function check_pwd() {
            var len = $('#password').val().length;
            if (len < 8 || len > 20) {
                $('#password').next().html('密码最少8位，最长20位')
                $('#password').next().show();
                error_password = true;
            } else {
                $('#password').next().hide();
                error_password = false;
            }
        }


        $('.reg_form').submit(function () {
            check_user_name();
            check_pwd();

            if (error_name == false && error_password == false && error_check == false) {
                return true;
            } else {
                return false;
            }

        })
    });
    $(document).ready(function() {
        $('#username').focusout(() => {
            $.ajax({
                method: "POST",
                url: "usernameCheck",
                data: {"username": $('#username').val()},
                dataType: "json",
                success: (data) => {
                    if (data.error) {
                        alert(data.error);
                    } else if (data.exist) {
                        alert("用户名存在，请使用其他的用户名！");
                    }
                }
            });
        });
    });
    document.getElementById('clear').onclick=function (){
        document.querySelector('.error_tip1').style.display="none";
        document.querySelector('.error_tip2').style.display="none";
    }
    // document.getElementById("add_user").addEventListener("submit",function (e){
    //     alert("添加用户成功！")
    // })
</script>
<script src="your_js_file.js?param=%E4%B8%AD%E6%96%87%E5%AD%97%E7%AC%A6"></script>

</body>
</html>
